<template>
  <div>
    
    <el-form-item size="medium">
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    </el-form>
    <el-table size="small" :data="workorderData.list" style="width: 100%">
      <el-table-column label="编号" type="index" width="50" align="center"></el-table-column>  
      <el-table-column label="工程" prop="engineer_name" min-width="200" align="left"></el-table-column>
      <el-table-column label="设备" prop="device_name" width="200" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="类型" prop="type" width="100" align="center"></el-table-column>
      <el-table-column label="工人" prop="account_name" width="100" align="center"></el-table-column>
      <el-table-column label="报修原因" prop="" width="100" align="center"></el-table-column>
      <el-table-column label="报修时间" prop="create_time" width="100" align="center"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="toDetailsHandler(scope.row)">详情</el-button>
          <el-button type="text" size="small" @click="toCancelHandler(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      hide-on-single-page
      :total="+workorderData.total"
      :current-page="+workorderData.page"
      :page-size="+workorderData.pageSize"
      @current-change="pageChangeHandler"
    ></el-pagination>
    
  </div>
</template>

<script>
import {get,postJSON} from '@/utils/request'
export default {
  data(){
    return {
      params:{
        page:1,
        pageSize:10
      },
      title:"",
      visible:false,
      form:{},
      workorderData:{list:[]}
    }
  },
  mounted() {
    this.loadWorkorders();
  },
  methods:{
    queryHandler(row){
      this.loadWorkorders();

    },
    toDetailsHandler(row){

    },
    // 取消工单
    toCancelHandler(row){

    },
    queryHandler(){
      this.params.page = 1;
      this.loadWorkorders();
    },
    
    // 加载工单数据
    loadWorkorders(){
      let url = "/workorder/pageQuery";
      get(url,this.params).then(resp => {
        this.workorderData = resp.data;
      })
    },
    pageChangeHandler(page){
      this.params.page = page;
      this.loadWorkorders();
    }
  }
}
</script>
  